<template>
  <div class="app-container">
    <div class="map-container">
      <Map
        :devices="locations.devices"
        v-if="ready"
      ></Map>
    </div>
  </div>
</template>

<script>
import Map from '@/components/Map'

import { getGroupLocation } from '@/api/devices'

export default {
  name: 'MapDemo',

  components: {
    Map
  },

  data() {
    return {
      locations: null,
      ready: false
    }
  },

  created() {
    this.fetchLocation()
  },

  methods: {
    fetchLocation() {
      getGroupLocation().then(response => {
        this.locations = response.data.items
        this.ready = true
      })
    }
  }
}
</script>

<style lang="scss">
</style>
